<template>
	<view v-if="isShow">
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							我的订单
						</view>
						<view class="app-header-right" @click="toSearchView">
							<image src="../../static/images/search_b.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page-order-list">
			<view class="tab">
				<view class="li " v-for="(i,j) in tab" :key="j" :class="{'active':j==tabIndex}" @click="tabIndex=j">
					<text>{{i}}</text>
				</view>
			</view>
			<view class="page-con">
				<view class="page-con-items">
					<view class="container">
						<template v-if="list.length==0">
							<view class="empty">您还没有 订单</view>
							<view class="title-head el-flex">
								<view class="h">
									<view class="bg bg-l"></view>
								</view>
								<view class="m">
									精选好物
								</view>
								<view class="h">
									<view class="bg bg-r"></view>
								</view>
							</view>
							<view class="good-view">
								<view class="view-data">
									<view class="view-item" v-for="(item,index) in recommendList" :key="index"
										@click="toProDatail(item)">
										<view class="img-box" v-if="item.data.goods">
											<LazyLoad width="3.3rem" height="3.3rem" :src="item.data.goods.img800">
											</LazyLoad>
										</view>
										<view class="info-box" v-if="item.data.goods">
											<view class="name">
												{{item.data.goods.name}}
											</view>
											<view class="tags el-flex">
												<template v-if="item.data.goods.labelGroup.abovePrice">
													<view class="tags-item"
														v-for="(i,j) in item.data.goods.labelGroup.abovePrice.slice(0,2)"
														:key="j">
														<text>{{i.name}}</text>
													</view>
												</template>
											</view>
											<view class="price">
												<text class="cur">
													¥
												</text>
												<text class="num">
													{{item.data.goods.priceInfo.singlePrice.price/100}}</text>
												<text class="qi" v-if="item.data.goods.priceInfo.priceTag">起</text>
												<text class="del"
													v-if="item.data.goods.priceInfo.singlePrice.price!=item.data.goods.priceInfo.marketPrice">¥{{item.data.goods.priceInfo.marketPrice/100}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="order-list">
								<view class="ol">
									<view class="li" v-for="(item,index) in list" :key="index">
										<view class="order-item" @click="toOrderView(item)">
											<view class="item-box-top">
												<view class="top-left">
													<view class="order-data">
														<image
															src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1f03f361e857881963e47ea2c7270ef.png"
															mode=""></image>
														<view class="str">
															小米商城
														</view>
													</view>
												</view>
												<view class="top-right" v-if="tabIndex!==2">
													等待付款
												</view>
												<view class="top-right" v-else>
													等待收货
												</view>
											</view>
											<block v-for="(child,childIndex) in item.goods" :key="childIndex">
												<view class="item-box-center el-flex">
													<image :src="child.img_url" mode=""></image>
													<view class="pro-info">
														<view class="pro-name text-ellipsis">
															{{child.name}}
														</view>
													</view>
													<view class="pro-right">
														<view class="pro-price">
															<text class="rmb">￥</text>
															<text>{{child.price}}</text>
														</view>
														<view class="pro-num">
															x{{child.count}}
														</view>
													</view>
												</view>
												<block v-for="(pack,packIndex) in child.packageList"
													:key="`${childIndex}_${packIndex}`">
													<view class="item-box-center el-flex">
														<image :src="pack.img_url" mode=""></image>
														<view class="pro-info">
															<view class="pro-name text-ellipsis">
																{{pack.name}}
															</view>
														</view>
														<view class="pro-right">
															<view class="pro-price">
																<text class="rmb">￥</text>
																<text>{{pack.price}}</text>
															</view>
															<view class="pro-num">
																x{{pack.count}}
															</view>
														</view>
													</view>

												</block>
												<block v-for="(serve,sIndex) in child.serveArr"
													:key="`${childIndex}_${sIndex}_0`">
													<view class="item-box-center el-flex">
														<template v-if="serve.service_type_name=='service_micloud'">
															<image
																src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572490983.06999803.jpg"
																mode="widthFix"></image>
														</template>
														<template
															v-else-if="serve.service_type_name=='service_prolong'">
															<image
																src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205231453_2126ed0b86f8fac1a0498a053cf5c337.png"
																mode="widthFix"></image>
														</template>
														<template v-else>
															<image
																src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212261525_bfb3fcf0720b57a3f90cde2a2d58d98e.png"
																mode="widthFix"></image>
														</template>
														<view class="pro-info">
															<view class="pro-name text-ellipsis">
																{{serve.name}}
															</view>
														</view>
														<view class="pro-right">
															<view class="pro-price">
																<text class="rmb">￥</text>
																<text>{{serve.price}}</text>
															</view>
															<view class="pro-num">
																x{{serve.count}}
															</view>
														</view>
													</view>

												</block>
											</block>
											<view class="item-box-bottom">
												<text class="add_time">
													{{(item.payEndTime-900000)|forDate}}
												</text>
												<text>共{{item.goods|forCount}}件商品</text>
												<text>应付金额：</text>
												<text class="str">{{item.goods|forMoney}}元</text>
											</view>
										</view>
										<view class="item-box-btn">
											<view class="btn btn-gray" @click="cancelOrder(index)" v-if="tabIndex!==2">
												取消订单
											</view>
											<view class="btn btn-gray" v-else>
												退款
											</view>
											<view class="bordered btn" @click="toPayView(item)" v-if="tabIndex!==2">
												立即付款
											</view>
											<view class="bordered btn" v-else @click="configItem(item,index)">
												确认收货
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="isShowPop" mode="bottom" @close="closePopup" closeable closeOnClickOverlay>
			<template>
				<view class="pop-product">
					<view class="title">
						确认收到货了吗
					</view>
					<view class="icon-con">
						<image :src="selectGood.img_url" mode=""></image>
						<view class="info">
							共{{selectGood.count}}件
						</view>
					</view>
					<view class="info-tip">
						为了保证你的售后权益，请收到货后确认无误后再确认收货
					</view>
					<view class="btn-cart-bottom">
						<view class="action-cart-box el-flex">
							<view class="buy-cart-btn" @click="sureGood">
								确定
							</view>
						</view>
					</view>
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import showModal from '../../common/js/showModal.js'
	export default {
		data() {
			return {
				tab: ['全部', '待付款', '待收货'],
				tabIndex: 0,
				selectIndex: 0,
				dataList: [],
				recommendList: [],
				isShow: false,
				isShowPop: false,
				is_buy_list: [],
				selectGood: {}
			};
		},
		computed: {
			list() {
				if (this.tabIndex == 0 || this.tabIndex == 1) {
					return this.dataList
				} else {
					return this.is_buy_list
				}
			}
		},
		filters: {
			forDate: function(timestamp) {
				if (timestamp) {
					let date = new Date(timestamp);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					let hour = date.getHours();
					let minute = date.getMinutes();
					let second = date.getSeconds();
					month = month < 10 ? '0' + month : month
					minute = minute < 10 ? '0' + minute : minute
					second = second < 10 ? '0' + second : second
					day = day < 10 ? '0' + day : day
					let formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
					return formattedDate
				}
			},
			forCount: function(goods) {
				let total = 0
				goods.forEach(i => {
					total += Number(i.count)
					total += i.packageList && i.packageList.length
					total += i.serveArr && i.serveArr.length
				})
				return total
			},
			forMoney: function(goods) {
				let total = 0
				goods.forEach(i => {
					total += Number(i.price)
					i.packageList && i.packageList.forEach(j => {
						total += Number(j.price)
					})
					i.serveArr && i.serveArr.forEach(j => {
						total += Number(j.price)
					})
				})
				return total.toFixed(2)
			},
		},
		watch: {
			'dataList.length': {
				handler(newVal) {
					if (newVal === 0) {
						this.get_merge_rec()
					}
				},
				immediate: true
			}
		},
		methods: {
			sureGood() {
				this.clearBuyGoodData([this.selectOrderId], this.selectIndex)
			},
			clearBuyGoodData(order_id, index) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/clearBuyGoodData',
					method: 'POST',
					header: {
						Authorization: userToken
					},
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.isShowPop = false
							if (index >= 0) {
								self.list.splice(index, 1)
							}
							uni.showToast({
								title: '收货成功',
								icon: 'success'
							})
						} else if (res.data.code == 401) {
							self.isShowPop = false
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {

					}
				})
			},
			configItem(item, index) {
				if (item) {
					this.selectGood = item.goods[0]
					this.selectOrderId = item.order_id
					this.selectIndex = index
					this.isShowPop = true
				}
			},
			closePopup() {
				this.isShowPop = false
			},
			toPayView(item) {
				if (item.order_id) {
					uni.navigateTo({
						url: `/subPage/pay-view/pay-view?order_id=${item.order_id}`
					})
				}
			},
			toOrderView(item) {
				if (this.tabIndex == 2) return;
				if (item.order_id) {
					uni.navigateTo({
						url: `/subPage/order-view/order-view?order_id=${item.order_id}`
					})
				}
			},
			toSearchView() {
				uni.navigateTo({
					url: '/secPage/searchView/searchView'
				})
			},
			get_merge_rec(flag) {
				this.$request.get('/get_merge_rec', {
					pageIdx: this.pageIdx,
				}).then((res) => {
					let list = res.data.data.recommendList
					if (flag) {
						this.recommendList = this.recommendList.concat(list)
					} else {
						this.recommendList = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			toProDatail(item) {
				let itemId = item.data.goods.itemId
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${itemId}`
				})
			},
			cancelOrder(index) {
				let self = this
				uni.showModal({
					title: '确定取消当前订单吗？',
					cancelText: '再看看',
					confirmText: '确定取消',
					success: (res) => {
						if (res.confirm) {
							self.clearSubPayData([self.dataList[index].order_id], index)
						}
					}
				})
			},
			clearSubPayData(order_id, index) {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/clearSubPayData',
					method: 'POST',
					header: {
						Authorization: userToken
					},
					data: {
						order_id: order_id
					},
					success: function(res) {
						if (res.data.code == 200) {
							if (index >= 0) {
								self.dataList.splice(index, 1)
							}
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {

					}
				})
			},
			Back() {
				uni.navigateBack(1)
			},
			getSubPayData() {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getSubPayData',
					method: 'GET',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.isShow = true
							let list = res.data.data
							let arr = []
							let endArr = []
							list.forEach((item, index) => {
								let time = Date.now()
								if (item.payEndTime + 60000 > time) {
									arr.push(item)
								} else {
									endArr.push(item.order_id)
								}
							})
							self.dataList = arr
							if (endArr.length !== 0) {
								self.clearSubPayData(endArr)
							}
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {

					}
				})
			},
			getBuyGoodData() {
				let self = this
				let userToken = uni.getStorageSync('USER_TOKEN')
				uni.request({
					url: 'http://42.193.218.104:7744/getBuyGoodData',
					method: 'GET',
					header: {
						Authorization: userToken
					},
					success: function(res) {
						if (res.data.code == 200) {
							self.isShow = true
							self.is_buy_list = res.data.data
						} else if (res.data.code == 401) {
							self.isShow = false
							showModal()
						}
					},
					fail: function(err) {

					}
				})
			}
		},
		onShow() {
			this.getSubPayData()
			this.getBuyGoodData()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		box-sizing: border-box;
	}

	.header {
		height: .96rem;
		background: #f2f2f2;

		.header-bar {
			background: #f2f2f2;
			height: 100%;
		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
				padding: 0 0.2rem;

				image {
					display: block;
					width: 0.6rem;
					height: 0.6rem;
				}
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.page-order-list {
		padding-top: .96rem;

		.tab {
			border-bottom: 0.01rem solid #ececec;
			position: sticky;
			top: 0.96rem;
			width: 100%;
			background: #fff;
			z-index: 2;

			.li {
				display: inline-block;
				width: 33.33%;
				text-align: center;
				line-height: .64rem;

				text {
					display: inline-block;
					padding: 0 0.1rem;
					line-height: .6rem;
					font-size: .26rem;
					color: rgba(0, 0, 0, .5);
				}
			}

			.active {
				text {
					color: #ff6700;
					border-bottom: 0.02rem solid #ff6700;
					font-weight: 700;
				}
			}
		}

		.page-con {
			.page-con-items {
				position: relative;
				left: 0;
				right: 0;
				background: #fff;
				transition: transform .4s cubic-bezier(.55, 0, .1, 1);

				.container {
					padding-bottom: 0.2rem;
					color: rgba(60, 60, 60, .87);

					.empty {
						font-size: .3rem;
						text-align: center;
						background: url(/static/images/empty_1.png) 50% 0 no-repeat;
						background-size: 2rem 2rem;
						padding-top: 2.5rem;
						color: #999;
						margin: 0.8rem 1rem 0;
					}

					.order-list {
						.ol {
							.li {
								border-top: 0.2rem solid RGBA(245, 245, 245, 1);
								font-size: .24rem;
								display: block;

								.order-item {

									.item-box-top {
										border-bottom: 0.02rem solid #ececec;
										display: box;
										display: -webkit-box;
										padding: 0.17rem 0.28rem;

										.top-left {
											-webkit-box-flex: 1;
											box-flex: 1;
											width: 100%;
											text-align: left;

											.order-data {
												font-size: .28rem;
												color: #000;
												display: flex;
												align-items: center;

												image {
													width: 0.4rem;
													height: 0.4rem;
													margin-right: 0.08rem;
												}

												.str {
													font-size: .28rem;
													color: #000;
													font-weight: 400;
												}
											}
										}

										.top-right {
											color: #ff5722;
											font-size: .26rem;
											position: relative;
											top: 0.07rem;
										}
									}

									.item-box-center {
										padding: 0.2rem 0.28rem;
										text-align: left;
										justify-content: space-around;

										image {
											width: 1.16rem;
											height: 1.16rem;
											margin-right: 0.24rem;
											display: block;
										}

										.pro-info {
											flex: 1;

											.pro-name {
												width: 4rem;
												font-size: .28rem;
												color: #000;
												overflow: hidden;
											}
										}

										.pro-right {
											text-align: right;
											color: rgba(0, 0, 0, .5);

											.pro-price {

												display: block;
												white-space: nowrap;
												overflow: hidden;
												text-overflow: ellipsis;
												line-height: 1.8em;

												text {
													font-size: .28rem;
												}

												.rmb {
													font-size: .2rem;
													position: relative;
													top: -0.04rem;
												}
											}

											.pro-num {
												font-size: .24rem;
												display: block;
												white-space: nowrap;
												overflow: hidden;
												text-overflow: ellipsis;
												line-height: 1.8em;
											}
										}
									}

									.item-box-bottom {
										padding: 0.2rem 0.28rem;
										text-align: right;
										border-top: 0.02rem solid #ececec;
										font-size: .24rem;

										text {
											margin-left: 0.2rem;
											color: #000;
										}

										.str {
											margin-left: 0;
											font-size: .3rem;
											display: inline-block;
											color: rgba(0, 0, 0, .5);
											font-weight: 400;
										}

										.add_time {
											float: left;
											font-size: .19rem;
											color: #919191;
											margin-top: 0.06rem;
										}
									}
								}

								.item-box-btn {
									padding: 0.15rem 0.28rem 0.2rem;
									overflow: hidden;
									text-align: right;

									.btn {
										display: inline-block;
										width: 1.47rem;
										height: auto;
										font-size: .22rem;
										padding: 0.14rem 0.2rem;
										border-radius: 0.04rem;
										margin-left: 0.2rem;
										text-align: center;
										line-height: normal;
									}

									.btn-gray {
										color: #999;
										border: 0.02rem solid #999;
									}

									.bordered {
										color: #ff6700;
										background: transparent;
										border: 0.02rem solid #ff6700;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.title-head {
		flex-direction: row;
		height: .42rem;
		display: flex;
		margin-bottom: .125rem;
		margin-top: .4rem;


		.h {
			height: .0288rem;
			width: .25rem;
			position: relative;

			.bg-l {
				background-image: url(../../static/images/rec_header_left.png);
			}

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
			}

			.bg-r {
				background-image: url(../../static/images/rec_header_right.png);
			}
		}

		.m {
			color: rgb(0, 0, 0);
			font-size: .33rem;
			font-weight: bold;
			padding: 0 .096rem;
		}
	}

	.good-view {

		.view-data {
			display: flex;
			flex-wrap: wrap;
			padding: .22rem;
			justify-content: space-between;
			padding-top: .2rem;
			padding-bottom: 0;


			.view-item {
				overflow: hidden;
				background-color: rgb(255, 255, 255);
				border-radius: .16rem;
				height: 5.3rem;
				width: 3.3rem;
				margin-bottom: .2rem;

				.img-box {
					height: 3.3rem;
					width: 3.3rem;

					image {
						height: 3.3rem;
						width: 3.3rem;
					}
				}

				.info-box {
					height: 2rem;
					padding-right: .2rem;
					padding-left: .2rem;

					.name {
						max-width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						height: .75rem;
						margin-top: .124rem;
						color: rgba(0, 0, 0, 0.9);
						font-size: .288rem;
						font-weight: bold;
						line-height: .36rem;
						vertical-align: middle;
					}

					.tags {
						height: .28rem;
						justify-content: flex-start;
						margin-top: .077rem;

						.tags-item {
							box-sizing: border-box;
							display: inline-block;
							background-color: rgb(255, 255, 255);
							border-radius: .038rem;
							border: .02rem solid rgb(255, 89, 0);
							flex-direction: row;
							height: .28rem;
							color: rgb(255, 89, 0);
							font-size: .2rem;
							margin-right: .058rem;
							padding: 0 .03rem;
						}
					}

					.price {
						height: .38rem;
						justify-content: space-between;
						margin-right: .21rem;
						margin-top: .2rem;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.9);

						.cur {
							font-size: .21rem;
						}

						.num {
							font-size: .32rem;
						}

						.qi {
							font-size: .17rem;
						}

						.del {
							color: rgb(175, 175, 175);
							font-size: .22rem;
							margin-bottom: .02rem;
							margin-left: .1rem;
							text-decoration-line: line-through;
						}
					}
				}
			}
		}
	}

	/deep/.u-popup__content__close {
		z-index: 999;
		top: .288rem !important;
		right: .288rem !important;
	}

	/deep/.u-popup__content {
		border-top-left-radius: 0.24rem;
		border-top-right-radius: 0.24rem;
	}

	.pop-product {
		background: white;
		border-top-left-radius: 0.24rem;
		border-top-right-radius: 0.24rem;
		padding: 0 0.32rem 0.8rem 0.32rem;
		height: 6.72rem;
		overflow-y: scroll;
		max-height: 6.72rem;
		min-height: 6.72rem;
		box-sizing: border-box;

		.title {
			font-size: 0.307rem;
			font-weight: 800;
			padding: 0.384rem;
			text-align: center;
		}

		.icon-con {
			width: 1.92rem;
			height: 1.92rem;
			border-radius: 0.153rem;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			background-color: rgba(0, 0, 0, .06);

			image {
				border-radius: 0.153rem;
				width: 1.92rem;
				height: 1.92rem;
			}

			.info {
				padding: 0.096rem;
				position: absolute;
				left: 0;
				font-size: 0.307rem;
				right: 0;
				bottom: 0;
				color: white;
				text-align: center;
				background-color: rgba(0, 0, 0, .6);
				width: 100%;
			}
		}

		.info-tip {
			font-weight: 600;
			line-height: 0.48rem;
			padding-top: 0.384rem;
			text-align: center;
			max-width: 80%;
			margin: 0 auto;
		}

		.btn-cart-bottom {
			position: absolute;
			bottom: 0.19rem;
			left: 0;
			right: 0;
			background: #fff;

			.action-cart-box {
				height: 1.04rem;
				padding: 0.12rem 0.31rem;

				.buy-cart-btn {
					height: 0.82rem;
					line-height: .82rem;
					background: url(../../static/images/icon-buy-tc.png) no-repeat;
					background-size: 100% 100%;
					border-radius: 0.4rem;
					color: #fff;
					display: block;
					text-align: center;
					width: 100%;
					font-size: .28rem;
				}
			}
		}

	}
</style>